<template>
	<view class="content">
		<view class="header-wrap">
			<view class="header-left" @click="goback">
				<image src="../../static/img/back_icon.png" mode=""></image>
			</view>
			<view class="header-title">
				<text>我的钱包</text>
			</view>
			<view class="header-right">
				
			</view>
		</view>
		<view class="wallet-wrap">
			<view class="title">钱包余额(税前):</view>
			<view class="wallet">
				<view class="balance">￥{{wallet}}</view>
				<view class="btn-wrap">
					<button class="withdraw" type="default" size="mini" @click="openWithdraw">提现</button>
					<button class="exchange" type="default" size="mini" @click="exchange">兑换米币</button>
				</view>
			</view>
		</view>
		<view class="menu-list">
			<view class="menu-item">
				<view class="label">待进钱包(税前):</view>
				<view class="value">￥{{wait}}</view>
			</view>
			<view class="menu-item" @click="openWin('my_withdraw')">
				<view class="label">我的提现</view>
				<view class="value"></view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="menu-item" @click="openWin('my_income')">
				<view class="label">我的账单</view>
				<view class="value"></view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view v-if="myInfo.type == '1'" class="menu-item" @click="openWin('my_stats')">
				<view class="label">收入统计</view>
				<view class="value"></view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view v-if="myInfo.type == '1'" class="menu-item" @click="openWin('my_live_hisory')">
				<view class="label">开播时长</view>
				<view class="value"></view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
		</view>
		<uni-popup ref="withdrawPopup" type="center" @change="withdrawChange">
			<view class="withdraw-popup">
				<view class="withdraw-popup-title">
					<text>提现</text>
				</view>
				<view class="withdraw-popup-input-wrap">
					<input class="withdraw-popup-input" type="text" v-model="card" placeholder="请填写收款银行账号" />
				</view>
				<view class="withdraw-popup-btn-wrap">
					<view class="withdraw-popup-btn">
						<button type="default" class="cancel-btn" @click="cancel">取消</button>
					</view>
					<view class="withdraw-popup-btn">
						<button type="primary" class="enter-btn" @click="enter">确定</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup,
		},
		data() {
			return {
				myInfo: {},
				wallet: 0,
				wait: 0,
				month: 0,
				rose: 0,
				card: '',
			}
		},
		onLoad(options) {
			try {
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					this.myInfo = myInfo
				}
			} catch (e) {
				console.log(e)
			}
		},
		onUnload() {
			
		},
		onReady() {
			this.getUserWallet();
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getUserWallet();
			}, 500)
		},
		methods: {
			goback: function () {
				uni.navigateBack({
					delta: 1
				})
			},
			getUserWallet: function () {
				this.$api.api.ajaxData({
					method: 'V1.UserWallet',
					uid: this.myInfo.id,
					token: this.myInfo.token
				}, res => {
					uni.stopPullDownRefresh();
					if (res.status) {
						this.wallet = res.data.wallet;
						this.wait = res.data.wait
						this.month = res.data.month
						this.rose = res.data.rose
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
					}
				}, err => {
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					});
				})
			},
			
			exchange: function () {
				let my_wallet = new Number(this.wallet)
				if (my_wallet <= 0) {
					uni.showToast({
						title: '您的钱包余额不足',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				uni.showModal({
					title: '提醒',
					content: '确认要把钱包余额兑换米币？',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: ''
							});
							this.$api.api.ajaxData({
								method: 'V1.UserExchange',
								uid: this.myInfo.id,
								token: this.myInfo.token
							}, res1 => {
								uni.hideLoading();
								uni.showToast({
									title: res1.msg,
									position: 'bottom',
									icon: 'none'
								});
								if (res1.status) {
									this.getUserWallet();
								}
							}, err => {
								uni.hideLoading();
								uni.showToast({
									title: '网络错误，请稍后再试',
									position: 'bottom',
									icon: 'none'
								});
							})
						}
					}
				});
			},
			
			openWithdraw: function () {
				this.$refs['withdrawPopup'].open();
			},
			
			withdrawChange: function (e) {
				console.log(e)
			},
			
			cancel: function () {
				this.$refs['withdrawPopup'].close();
			},
			
			enter: function () {
				if (this.card == '') {
					uni.showToast({
						title: '请填写收款银行账号',
						position: 'bottom',
						icon: 'none'
					})
					return false;
				}
				uni.showLoading({
					title: ''
				});
				this.$api.api.ajaxData({
					method: 'V1.UserCashout',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					card: this.card
				}, res => {
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
						position: 'bottom',
						icon: 'none'
					});
					if (res.status) {
						this.getUserWallet();
					}
				}, err => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					});
				})
			},
			
			openWin: function (url) {
				uni.navigateTo({
					url: url + '?userinfo=' + JSON.stringify(this.myInfo)
				})
			},
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	.header-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		padding-top: var(--status-bar-height);;
		background-color: #FF76A8;
		.header-left {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
		.header-title {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			text {
				font-size: 36rpx;
				color: #fff;
			}
		}
		.header-right {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.wallet-wrap {
		padding: 80rpx 40rpx;
		background-image: linear-gradient(to bottom, #FF76A8, #ED4574);
		.title {
			font-size: 32rpx;
			color: #fff;
		}
		.wallet {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.balance {
				font-size: 56rpx;
				color: #fff;
			}
			.btn-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				button {
					width: 160rpx;
					font-size: 24rpx;
					border-radius: 60rpx;
				}
				.exchange{
					padding: 0 10rpx !important;
				}
				.withdraw {
					margin-right: 20rpx;
				}
			}
		}
	}
	.menu-item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 25rpx;
		background-color: #fff;
		& + .menu-item {
			border-top: 1rpx solid #efefef;
		}
		.label {
			font-size: 28rpx;
			color: #333;
		}
		.value {
			flex: 1;
			font-size: 28rpx;
			text-align: right;
			color: #666;
		}
		.uni-icon-arrowright {
			color: #999;
			font-size: 28rpx;
		}
	}
	.withdraw-popup {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 560rpx;
		height: 480rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	.withdraw-popup-title {
		margin-bottom: 40rpx;
		text {
			font-size: 36rpx;
			color: #333333;
		}
	}
	.withdraw-popup-input-wrap {
		display: flex;
		height: 100rpx;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		border: 1rpx solid #EFEFEF;
		border-radius: 10rpx;
	}
	.withdraw-popup-input {
		width: 400rpx;
		font-size: 30rpx;
		color: #333333;
	}
	.withdraw-popup-btn-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 440rpx;
		margin-top: 40rpx;
		.withdraw-popup-btn {
			width: 200rpx;
		}
		button {
			height: 80rpx;
			font-size: 32rpx;
		}
	}
</style>
